
<template>
  <div class="scrollbar routerview">
    <div class="innerBox" v-if="!isHide">
        <div class="headerBox">
            
                <el-input
                class="search"
                placeholder="搜索角色名称"
                prefix-icon="el-icon-search"
                v-model="searchValue">
                </el-input>

                <el-button type="primary" :disabled="disable"  icon="el-icon-search" @click="searchData">搜索</el-button>
                <el-button type="primary"  icon="el-icon-refresh-right" @click="resetData">重置</el-button>
                <el-button type="primary"  icon="el-icon-plus" @click="handleAdd" v-permission="'add'">新增</el-button>
             
        </div>
        <div class="bodyBox">
            <el-table
                 :data="queryFlag?queryData.slice((currentpage-1)*pagesize,currentpage*pagesize):list.slice((currentpage-1)*pagesize,currentpage*pagesize)"
                tooltip-effect="dark"
                :header-cell-style="{background:'#f5f7fa',color:'#606266',width:'100%'}"
                style="width: 100%"
                height="100%"
                max-height="70vh"
                border
                :key="key"
                >
        
                <el-table-column
                type="index"
                label="序号"
                width="50">
                </el-table-column>
                <el-table-column
                prop="objectId"
                label="角色ID"
                width="120">
                </el-table-column>
                <el-table-column
                prop="roleName"
                label="角色名称"
                width="120">
                 <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="scope.row.roleName" placement="bottom">
                    <div class="cell">{{scope.row.roleName}}</div>
                  </el-tooltip>
                 </template>
                </el-table-column>
                <el-table-column
                prop="isEnable"
                label="状态"
                sortable
                width="90">
                <template slot-scope="scope">
                <el-switch
                disabled
                v-model="scope.row.isEnable"
                active-color="#67C23A"
                inactive-color="#C0C4CC">
                </el-switch>
                </template>
                </el-table-column>
                <el-table-column
                prop="updatedAt"
                label="更新日期"
                sortable
                width="240">
                </el-table-column>
                <el-table-column
                prop="createdAt"
                label="创建日期"
                sortable
                min-width="200">
                </el-table-column>

                <el-table-column label="操作" fixed="right" width="240">
                <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                @click="handlePermission(scope.row)">查看</el-button>
                <el-button
                size="mini"
                type="success" 
                plain
                v-permission="'update'"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <template>
                <el-popconfirm
                title="是否删除该角色？"
                style="margin-left:10px"
                v-permission="'delete'"
                @confirm="handleDelete(scope.$index, scope.row)"
                >
                <el-button
                size="mini"
                type="danger"
                slot="reference"
                >删除</el-button>
                </el-popconfirm>
                </template>
               
                </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flootBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentpage"
                :page-sizes="[20, 50, 100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryFlag?queryData.length:list.length">
            </el-pagination>
        </div>
    </div>
    <state-view :isShow='stateShow' :description='stateDescription' :image='stateImage' class="innerBox" @reload='resetPagerData'></state-view>
    <div v-loading.lock="isloading" class="layout-center" v-if="isloading" style="height: 100%;z-index:1"></div>
    <roleManageDialog
        :Visible='dialogVisible' 
        v-if="dialogVisible"
        :editMark='editMark'
        :listData='listData'
        :permission="permission"
        @close='dialogVisible=false' 
        @save='resetLoadData'
        >
    </roleManageDialog>
  </div>
</template>

<script>
import roleManageDialog from '@/components/dialog/roleManageDialog'
import { common } from '@/mixin/common'
export default {
  props: {
    isFinish:{
        type:Boolean,
        default:false
    }
  },
  mixins:[common],
  components: {
      roleManageDialog
  },
  data() {
    return {
        menuname:'角色管理',
        //弹框是否展示
        dialogVisible:false,
        editMark:false,
        listData:{},//编辑传过去的数据
        permission:false, //权限查看标识
    };
  },
  computed: {

  },
  watch: {
    searchValue(value){
       value ? this.disable=false:this.disable=true
    },
  },
  created() {

  },
  mounted() {
      this.getData(1000)
  },
  activated() {
  },
  methods: {
    getData(time){
        this.timer=setTimeout(() => {
        this.$http.getAllData(this,'Role').then(data=>{
            //成功回调
            clearTimeout(this.timer)
            this.successHandle()
            this.list=data
            console.log(data);
        }).catch(error=>{
            //失败回调
            clearTimeout(this.timer)
            this.errorHandle()
        })
    }, time);
    },
    searchData(){
        if(this.searchValue){
            this.queryFlag=true
            let keyword = this.searchValue
            //网络请求获取数据(条件查询，bmob模糊查询需要付费)
            this.$http.getRoleSearchData(this,keyword).then(data=>{
                this.queryData=data
            })
        }else{
            this.$utils.message.warning(this,'搜索内容不能为空')
        }
      },
    handleAdd(){
        this.editMark = false
        this.permission = false
        this.dialogVisible?this.dialogVisible=false:this.dialogVisible=true
      },

    handleEdit(index, rowlist){
        this.dialogVisible?this.dialogVisible=false:this.dialogVisible=true
        this.listData = JSON.parse(JSON.stringify(rowlist))
        this.editMark = true
        this.permission = false
      },

    handlePermission(rowlist){
        this.dialogVisible?this.dialogVisible=false:this.dialogVisible=true
        this.listData = JSON.parse(JSON.stringify(rowlist))
        this.editMark = true
        this.permission = true
      },

    handleDelete(index,rowlist){
        this.$http.deleteData(this,rowlist.objectId,'Role').then(success=>{
            if(this.queryFlag){
                this.queryData.splice(index,1)
            }else{
                this.list.splice(index,1)
            }
        })
      },
  },
};
</script>

<style scoped lang="scss">

.headerBox {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    [class*="el"] {
        height: 40px;
        margin: 5px;
        text-align: center;
    }
}

/deep/.el-input__inner,.el-input{
    flex-basis: 230px;
}

/deep/.cell {
    text-align: center;
    white-space: nowrap;
}
.bodyBox {
    margin: 15px 5px;
}

.flootBox {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>

